<template>
  <div class="box">
    <!--{{ provinceArr }}-->
    <div class="selectCity">
      <svg-icon class="icon" icon-class="icon_address" />
      <span v-if="addressInfo">{{ addressInfo }}</span>
      <span v-else class="place">地区信息</span>
      <input slot="right" v-model="addressInfo" class="inputCity" type="text" readonly placeholder="请选择收货地址" @click.stop="show1 = true">
    </div>
    <yd-cityselect
      v-model="show1"
      :callback="result1"
      :items="district"
      :provance="province_id"
      :city="city_id"
      :area="area_id"/>
  </div>
</template>

<script>
/* eslint-disable */
  import axios from 'axios'
  import addressMap from '../../../static/json/map'
  export default {
    data () {
      return {
        provinceArr: [], // 将json文件的地址格式转化一下
        mapJson:'../static/json/map.json',
        province_id: undefined,
        city_id: undefined,
        area_id: undefined,
        show1: false,
        addressInfo: '',
        district: addressMap
      }
    },
    methods:{
      result1(ret) {
        this.addressInfo = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3
        this.$emit('getAddressInfo', ret)
      },
      // 转化地址格式
      getCityData(){
        axios.get(this.mapJson).then((response)=>{
          if (response.status==200) {
            var data = response.data
            const provinceArr = []
            const cities = []
            const block = []
            // 省市区数据分类
            for (var item in data) {
              if (item.match(/0000$/)) {//省
                provinceArr.push({v: item, n: data[item], c: []})
              } else if (item.match(/00$/)) {//市
                cities.push({v: item, n: data[item], c: []})
              } else {//区
                block.push({v: item, n: data[item]})
              }
            }
            // 分类市级
            for (var index in provinceArr) {
              for (var index1 in cities) {
                if (provinceArr[index].v.slice(0, 2) === cities[index1].v.slice(0, 2)) {
                  provinceArr[index].c.push(cities[index1])
                }
              }
            }
            // 分类区级
            for(var item1 in cities) {
              for(var item2 in block) {
                if (block[item2].v.slice(0, 4) === cities[item1].v.slice(0, 4)) {
                  cities[item1].c.push(block[item2])
                }
              }
            }
            this.provinceArr = provinceArr
            // console.log(provinceArr)
          }
          else{
            console.log(response.status)
          }
        }).catch((error)=>{
          console.log(typeof + error, '失败')
        })
      }
    },
    created() {
      this.getCityData()
    }
  }
</script>

<style lang="scss">
  @import "src/styles/mixin.scss";
  .yd-cityselect-title{
    font-size: pxCalc(14px);
  }
</style>
<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .box{
    height: pxCalc(50px);
  }
  .selectCity{
    display: inline-block;
    padding-right: pxCalc(20px);
    font-size: pxCalc(13px);
    width: 100%;
    @include showEllipsis;
    .place{
      color: rgb(156, 158, 161);
    }
    .inputCity{
      position: absolute;
      right: 0;
      z-index: 222;
      opacity: 0;
      width: pxCalc(290px);
    }
  }
</style>
